<template>
    <div class="todo-item">
      <input type="checkbox" :checked="completed" @change="toggleCompletion" />
      <span :class="{ completed: completed }">{{ title }}</span>
      <button @click="removeTodo">删除</button>
    </div>
  </template>
  
  <script>
  export default {
    name: 'TodoItem',
    props: {
      title: String,
      completed: Boolean
    },
    methods: {
      toggleCompletion() {
        this.$emit('update:completed', !this.completed);
      },
      removeTodo() {
        this.$emit('remove-todo');
      }
    }
  }
  </script>
  
  <style scoped>
  .completed {
    text-decoration: line-through;
  }
  </style>